<template>
  <div class="detailbox">
    <div>
      <div></div>
      <div>
        <h3>王小军</h3>
        <p><span>个性签名：</span><span>深圳一条街打听谁是爹</span></p>
        <p><span>个性签名：</span> <span>夜店达人</span></p>
        <p><span>服务技能：</span> <span>翻译</span> <span>带娃达人</span></p>
        <p><span>联系电话：</span> <span>158 8988 8777</span></p>
      </div>
    </div>
    <!-- table 元素 -->
    <div>
      <div>
        <span>分销路线总数</span>
        <span>分销订单总数</span>
        <span>分销订单总金额（元）</span>
      </div>
      <div>
        <span>1</span>
        <span>17</span>
        <span>15630.08</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route.query);
  },
};
</script>

<style lang='less'>
.detailbox {
  text-align: left;
  position: relative;
  bottom: 8vh;
  padding: 3vh;
  background-color: #fff;
  height: 100%;

  & > div:nth-child(1) {
    display: flex;
    & > div:first-child {
      width: 10vh;
      border-radius: 8px;
      height: 10vh;
      overflow: hidden;
      background-color: #ccc;
      margin-right: 1vw;
    }
    & > div:last-child {
      span {
        line-height: 3.6vh;
      }
    }
  }
  & > div:nth-child(2) {
    margin-top: 6vh;
    & > div {
      display: flex;
      width: 37vw;
      line-height: 7vh;
      &:first-child {
        font-weight: 550;
        background-color: #fafafa;
      }
      &:last-child {
        border-bottom: 1px solid #f1f1f1;
      }
      & > span {
        font-size: 14px;
        padding: 0 1vw;
        width: 11vw;
      }
    }
  }
}
</style>